<%+header%>

<h2>NetFlow 系统概览</h2>

<div class="cbi-map">
    <div class="cbi-section">
        <h3>系统状态</h3>
        <div class="cbi-section-node">
            <div class="table">
                <div class="tr">
                    <div class="td left">状态:</div>
                    <div class="td left" id="status">
                        <em><%:正在加载...%></em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">版本:</div>
                    <div class="td left" id="version">
                        <em><%:正在加载...%></em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">运行时间:</div>
                    <div class="td left" id="uptime">
                        <em><%:正在加载...%></em>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="cbi-section">
        <h3>网络负载</h3>
        <div class="cbi-section-node">
            <div class="table">
                <div class="tr">
                    <div class="td left">当前负载:</div>
                    <div class="td left" id="load_factor">
                        <em><%:正在加载...%></em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">拥塞指数:</div>
                    <div class="td left" id="congestion_index">
                        <em><%:正在加载...%></em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">当前带宽使用:</div>
                    <div class="td left" id="current_bw">
                        <em><%:正在加载...%></em>
                    </div>
                </div>
                <div class="tr">
                    <div class="td left">总带宽:</div>
                    <div class="td left" id="total_bw">
                        <em><%:正在加载...%></em>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="cbi-section">
        <h3>带宽分配</h3>
        <div class="cbi-section-node">
            <div id="bandwidth_chart" style="height: 300px;"></div>
        </div>
    </div>
    
    <div class="cbi-section">
        <h3>实时流量监控</h3>
        <div class="cbi-section-node">
            <div id="traffic_chart" style="height: 300px;"></div>
        </div>
    </div>
    
    <div class="cbi-section">
        <h3>应用流量分布</h3>
        <div class="cbi-section-node">
            <div id="app_chart" style="height: 300px;"></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="<%=resource%>/echarts/echarts.min.js"></script>
<script type="text/javascript">//<![CDATA[
    var statusPollTimer;
    var metricsPollTimer;
    var trafficChartTimer;
    var appChartTimer;
    
    var trafficChart;
    var bandwidthChart;
    var appChart;
    
    var trafficData = [];
    var timestamps = [];
    
    function initCharts() {
        // 初始化带宽分配图表
        bandwidthChart = echarts.init(document.getElementById('bandwidth_chart'));
        var bandwidthOption = {
            title: {
                text: '优先级带宽分配'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['最小保证带宽', '最大可用带宽']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    formatter: '{value} %'
                }
            },
            yAxis: {
                type: 'category',
                data: ['实时交互类', '流媒体类', '普通数据类', '背景传输类']
            },
            series: [
                {
                    name: '最小保证带宽',
                    type: 'bar',
                    data: [40, 30, 20, 10]
                },
                {
                    name: '最大可用带宽',
                    type: 'bar',
                    data: [100, 80, 60, 40]
                }
            ]
        };
        bandwidthChart.setOption(bandwidthOption);
        
        // 初始化流量监控图表
        trafficChart = echarts.init(document.getElementById('traffic_chart'));
        var trafficOption = {
            title: {
                text: '实时带宽使用'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    var result = params[0].axisValue + '<br/>';
                    params.forEach(function(param) {
                        result += param.seriesName + ': ' + 
                                 (param.value / 1000000).toFixed(2) + ' Mbps<br/>';
                    });
                    return result;
                }
            },
            legend: {
                data: ['当前带宽']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: function(value) {
                        return (value / 1000000).toFixed(2) + ' Mbps';
                    }
                }
            },
            series: [
                {
                    name: '当前带宽',
                    type: 'line',
                    data: []
                }
            ]
        };
        trafficChart.setOption(trafficOption);
        
        // 初始化应用流量图表
        appChart = echarts.init(document.getElementById('app_chart'));
        var appOption = {
            title: {
                text: '应用流量分布'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['视频会议', '语音通话', '在线游戏', '视频流媒体', '音频流媒体', 
                       '网页浏览', '文件下载', 'P2P下载', '其他']
            },
            series: [
                {
                    name: '应用流量',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 0, name: '视频会议'},
                        {value: 0, name: '语音通话'},
                        {value: 0, name: '在线游戏'},
                        {value: 0, name: '视频流媒体'},
                        {value: 0, name: '音频流媒体'},
                        {value: 0, name: '网页浏览'},
                        {value: 0, name: '文件下载'},
                        {value: 0, name: 'P2P下载'},
                        {value: 0, name: '其他'}
                    ]
                }
            ]
        };
        appChart.setOption(appOption);
    }
    
    function updateSystemStatus() {
        // 静态假数据，模拟服务器返回的数据
        var data = {
            running: true,
            version: "1.5.3",
            uptime: "3天 7小时 42分钟"
        };
        
        var statusText = data.running ? 
                        '<span style="color:green"><%:运行中%></span>' : 
                        '<span style="color:red"><%:已停止%></span>';
        document.getElementById('status').innerHTML = statusText;
        document.getElementById('version').innerHTML = data.version || 'N/A';
        document.getElementById('uptime').innerHTML = data.uptime || 'N/A';
    }
    
    function updateNetworkMetrics() {
        // 静态假数据，模拟服务器返回的数据
        var data = {
            load_factor: 0.65,
            congestion_index: 0.32,
            traffic: {
                current_bps: 45000000, // 45Mbps
                capacity_bps: 100000000 // 100Mbps
            },
            bandwidth_allocation: {
                rt_min: 40,
                rt_max: 100,
                streaming_min: 30,
                streaming_max: 80,
                normal_min: 20,
                normal_max: 60,
                background_min: 10,
                background_max: 40
            }
        };
        
        var loadFactor = data.load_factor * 100;
        var congestionIndex = data.congestion_index * 100;
        var currentBw = data.traffic ? data.traffic.current_bps : 0;
        var totalBw = data.traffic ? data.traffic.capacity_bps : 0;
        
        document.getElementById('load_factor').innerHTML = loadFactor.toFixed(1) + '%';
        document.getElementById('congestion_index').innerHTML = congestionIndex.toFixed(1) + '%';
        document.getElementById('current_bw').innerHTML = (currentBw / 1000000).toFixed(2) + ' Mbps';
        document.getElementById('total_bw').innerHTML = (totalBw / 1000000).toFixed(2) + ' Mbps';
        
        // 更新带宽分配图表
        if (data.bandwidth_allocation) {
            var minBw = [
                data.bandwidth_allocation.rt_min,
                data.bandwidth_allocation.streaming_min,
                data.bandwidth_allocation.normal_min,
                data.bandwidth_allocation.background_min
            ];
            var maxBw = [
                data.bandwidth_allocation.rt_max,
                data.bandwidth_allocation.streaming_max,
                data.bandwidth_allocation.normal_max,
                data.bandwidth_allocation.background_max
            ];
            
            bandwidthChart.setOption({
                series: [
                    {
                        name: '最小保证带宽',
                        data: minBw
                    },
                    {
                        name: '最大可用带宽',
                        data: maxBw
                    }
                ]
            });
        }
        
        // 更新流量图表数据
        if (data.traffic) {
            var now = new Date();
            var timeStr = now.getHours() + ':' + 
                         (now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()) + ':' + 
                         (now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds());
            
            // 添加一些随机波动，使图表看起来更真实
            var fluctuation = Math.random() * 10000000 - 5000000; // 随机波动±5Mbps
            var currentBwWithFluctuation = currentBw + fluctuation;
            if (currentBwWithFluctuation < 0) currentBwWithFluctuation = 0;
            if (currentBwWithFluctuation > totalBw) currentBwWithFluctuation = totalBw;
            
            timestamps.push(timeStr);
            trafficData.push(currentBwWithFluctuation);
            
            // 保持最多60个数据点（10分钟）
            if (timestamps.length > 60) {
                timestamps.shift();
                trafficData.shift();
            }
            
            trafficChart.setOption({
                xAxis: {
                    data: timestamps
                },
                series: [
                    {
                        name: '当前带宽',
                        data: trafficData
                    }
                ]
            });
        }
    }
    
    function updateAppStats() {
        // 静态假数据，模拟服务器返回的数据
        var data = {
            app_traffic: {
                video_conference: 15,
                voip: 8,
                gaming: 12,
                video_streaming: 30,
                audio_streaming: 5,
                web_browsing: 20,
                file_download: 10,
                p2p: 5,
                other: 5
            }
        };
        
        if (data && data.app_traffic) {
            var appData = [
                {value: data.app_traffic.video_conference || 0, name: '视频会议'},
                {value: data.app_traffic.voip || 0, name: '语音通话'},
                {value: data.app_traffic.gaming || 0, name: '在线游戏'},
                {value: data.app_traffic.video_streaming || 0, name: '视频流媒体'},
                {value: data.app_traffic.audio_streaming || 0, name: '音频流媒体'},
                {value: data.app_traffic.web_browsing || 0, name: '网页浏览'},
                {value: data.app_traffic.file_download || 0, name: '文件下载'},
                {value: data.app_traffic.p2p || 0, name: 'P2P下载'},
                {value: data.app_traffic.other || 0, name: '其他'}
            ];
            
            appChart.setOption({
                series: [
                    {
                        name: '应用流量',
                        data: appData
                    }
                ]
            });
        }
    }
    
    window.onload = function() {
        initCharts();
        
        // 初始更新
        updateSystemStatus();
        updateNetworkMetrics();
        updateAppStats();
        
        // 设置定时更新
        statusPollTimer = window.setInterval(updateSystemStatus, 30000); // 30秒更新一次状态
        metricsPollTimer = window.setInterval(updateNetworkMetrics, 2000); // 2秒更新一次网络指标
        appChartTimer = window.setInterval(updateAppStats, 10000); // 10秒更新一次应用统计
    };
    
    window.onresize = function() {
        if (bandwidthChart) bandwidthChart.resize();
        if (trafficChart) trafficChart.resize();
        if (appChart) appChart.resize();
    };
    
    window.onunload = function() {
        window.clearInterval(statusPollTimer);
        window.clearInterval(metricsPollTimer);
        window.clearInterval(appChartTimer);
    };
//]]></script>

<%+footer%>
